<!-- A fully fleshed-out <head>, dynamically changing based on client.json and the page front matter -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Standard meta tags -->
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="{{ description }}">
        <link rel="canonical" href="{{ client.domain }}{{ page.url }}">
        <meta name="generator" content="{{ eleventy.generator }}">

        <!--Social Media Display-->
        <meta property="og:title" content="{{ title }}"/>
        <meta property="og:description" content="{{ description }}"/>
        <meta property="og:type" content="website"/>
        <meta property="og:url" content="{{ client.domain }}{{ page.url }}"/>
        <meta property="og:image" content="{{ image or "/assets/images/logo-small.png" }}"/>
        <meta property="og:image:secure_url" content="{{ image or "/assets/images/logo-small.png" }}"/>

        <!--Favicons-->
        <!-- https://realfavicongenerator.net/ -->
        <link rel="icon" type="image/png" href="/assets/favicons/favicon-96x96.png" sizes="96x96"/>
        <link rel="icon" type="image/svg+xml" href="/assets/favicons/favicon.svg"/>
        <link rel="shortcut icon" href="/assets/favicons/favicon.ico"/>
        <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png"/>
        <meta name="apple-mobile-web-app-title" content="Starter Kit"/>
        <link rel="manifest" href="/assets/favicons/site.webmanifest"/>

        <!-- Preloads -->
        <link rel="preload" as="image" href="/assets/svgs/logo-black.svg">
        <link rel="preload" as="font" type="font/woff2" href="/assets/fonts/roboto-v29-latin-regular.woff2" crossorigin>
        <link rel="preload" as="font" type="font/woff2" href="/assets/fonts/roboto-v29-latin-700.woff2" crossorigin>

        <!-- Sitewide Stylesheets and Scripts -->
        <link rel="stylesheet" href="/assets/css/root.css">
        <script defer src="/assets/js/dark.js"></script>
        <script defer src="/assets/js/nav.js"></script>

        {% block head %}{% endblock %}

        <title>{{ title }}</title>
    </head>
    <body>
        <!--Screen reader skip main nav-->
        <a class="skip" aria-label="skip to main content" href="#main">Click To Skip To Main Content</a>

        {% include "sections/header.html" %}
        <main id="main">
            {% block body %}{% endblock %}
        </main>
        {% include "sections/footer.html" %}

    </body>
</html>